<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watchEffect</title>
</head>
<body>
<div id="app"></div>
<script>
  import { computed, reactive,watchEffect, effect, watch } from "../js/reactivity/index.js";
  // import {
  //   computed,
  //   reactive,
  //   effect,
  //     watch
  // } from "https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.runtime.esm-browser.prod.js";


  const state = reactive({
    firstName: "j",
    lastName: "w",
    age: 30,
  });

  watchEffect(()=> {
    app.innerHTML = state.firstName + state.lastName
  })

  setTimeout(()=> {
    state.firstName  ='l'
  })

</script>
</body>
</html>
